<template>
    <div>
        <el-form style="padding: 20px;padding-bottom: 0;width:50%" ref="form" :rules="rules" :model="docForm" label-width="120px">
            <el-form-item label="事务类型" prop="changetype">
                <el-select v-model="docForm.changetype" placeholder="事务类型" style="width:100%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--            <div style="position: relative;">-->
            <!--                <span style="color:red;position: absolute;top: 35%;left:5%;">*</span>-->
            <!--                <el-form-item label="表单模板">-->
            <!--                    <el-select style="width:100%" v-model="manageName" filterable :filter-method="remoteMethodManage" clearable placeholder="请选择表单模板" value-key="formKey" @change="manageClick">-->
            <!--                        <el-option v-for="item in manage" :key="item.formKey" :label="item.formName" :value="item">-->
            <!--                        </el-option>-->
            <!--                    </el-select>-->
            <!--                </el-form-item>-->
            <!--            </div>-->

            <div style="position: relative;">
                <el-form-item label="流程表单" prop="modelId">
                    <el-select style="width:100%" v-model="processName" filterable :filter-method="remoteMethodProcess" clearable placeholder="请选择流程表单" value-key="id" @change="processClick">
                        <el-option v-for="item in process" :key="item.id" :label="item.name" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <parser v-if="formData" :form-conf="formData" ref="parser" @submit="submit" />
            <el-form-item label="附件" prop="docFilePath">
                <span v-for="item in docForm.docFilePath" v-if="docForm.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}</span>
                <singlefileUpload style="width: 100px" ref="upload" :ruleFormdocFilePath='docForm.docFilePath' @uploadListDel="uploadListDel" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">
                    <template v-slot:openDialog>
                        <div style="display: flex;flex-direction: column;">
                            <el-button style="width: 100px;" plain>上传附件</el-button>
                        </div>
                    </template>
                </singlefileUpload>
            </el-form-item>
            <el-form-item label='描述'>
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="content"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" style="margin-left: 100px;" @click="launchChangeclick('form')">立即申请</el-button>
        <el-button @click="cencel">取消</el-button>
        <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm"
                @uploadListDel="uploadListDel"></uploadList> -->
    </div>
</template>
<script>
import Parser from "@/components/FormGenerator/components/parser";
import { launchChange } from "@/api/modi";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import singlefileUpload from "@/components/upload/singlefileUpload";
import uploadList from "@/components/upload/uploadList.vue";
import utils from "@/utils/utils";

export default {
    name: "ProjApply",
    components: {
        Parser,
        singlefileUpload,
        uploadList,
    },
    data() {
        return {
            changetype: "",
            options: [
                { value: "00", label: "申请修改" },
                { value: "01", label: "项目中止" },
                { value: "02", label: "项目重启" },
                { value: "03", label: "项目终止" },
            ],
            uploadListType: false,
            uploadForm: [],
            docFilePath: "",
            submformData: "",
            formKey: "",
            formData: "",
            processName: "",
            manageName: "",
            rules: {
                changetype: [
                    {
                        required: true,
                        message: "请选择事务",
                        trigger: "blur",
                    },
                ],
                modelId: [
                    {
                        required: true,
                        message: "请选择关联流程",
                        trigger: "blur",
                    },
                ],
            },
            process: [],
            manage: [],
            modelId: "",
            content: "",
            docForm: {
                docFilePath: [],
                modelId: "",
                formKey: "",
                changetype: "",
            },
        };
    },
    created() {
        this.processList();
        // this.manageList();
    },
    methods: {
        uploadListDel(data) {
            this.uploadForm.splice(data, 1);
        },
        uploadListShow(data) {
            this.uploadForm = this.docForm.docFilePath;
            this.uploadListType = data;
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        //上传附件（确定按钮）
        uploadSave(val) {
            let _this = this;
            _this.docForm.docFilePath = _this.uploadForm;
            _this.$refs.upload.sucessClick();
        },
        cencel() {
            let _this = this;
            this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                    this.$router.push({
                        path: "/project/details",
                        query: { id: this.$route.query.id },
                    });
                }); // 关闭当前tab回到列表
        },
        launchChangeclick(formName) {
            let _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (_this.formData) {
                        _this.$refs.parser.submitForm();
                    } else {
                        launchChange({
                            content: _this.content,
                            modiType: "00",
                            modiSubtype: _this.docForm.changetype,
                            modiTypeId: _this.$route.query.id,
                            status: "00",
                            modelId: _this.docForm.modelId,
                            formKey: _this.docForm.formKey,
                            formData: _this.submformData,
                            docFilePath: _this.docForm.docFilePath,
                        }).then((res) => {
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    _this.$EventBus.$emit("ProjApply");
                                    _this.$router.push({
                                        path: "/project/details",
                                        query: { id: _this.$route.query.id },
                                    });
                                }); // 关闭当前tab回到列表
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
            // if (utils.isNull(this.modelId)) {
            //   _this.$message.error("请选择审批流程");
            //   return;
            // }
            // if (utils.isNull(this.formKey)) {
            //   _this.$message.error("请选择表单");
            //   return;
            // }
        },
        processList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/processDefinition/list",
                {
                    processDefinitionName: name,
                    category: "XM",
                },
                false
            ).then((res) => {
                const { data } = res;
                data.records.forEach((item) => {
                    if (item.category == "XM") {
                        this.process.push(item);
                    }
                });
                // this.process = data.records
            });
        },
        manageList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/form/list",
                {
                    formName: name,
                    current: 1,
                    size: 50,
                },
                false
            ).then((res) => {
                const { data } = res;
                this.manage = data.records;
            });
        },
        remoteMethodProcess(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.processList(data);
            }, 500);
        },
        processClick(data) {
            console.log(data);
            var _this = this;
            this.processName = data.name;
            this.docForm.modelId = data.id;
            this.docForm.formKey = data.key;
            this.formData=''
            if (data.key) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.key,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }else{
                this.formData=''
            }
        },
        submit(data) {
            var _this = this;
            this.submformData = JSON.stringify(data);
            launchChange({
                content: this.content,
                modiType: "00",
                modiSubtype: this.docForm.changetype,
                modiTypeId: this.$route.query.id,
                status: "00",
                modelId: this.docForm.modelId,
                formKey: this.docForm.formKey,
                docFilePath: this.docForm.docFilePath,
                formData: this.submformData,
            }).then((res) => {
                this.$store
                    .dispatch("tagsView/delView", _this.$route)
                    .then(({ visitedViews }) => {
                        this.$router.push({
                            path: "/project/details",
                            query: { id: this.$route.query.id },
                        });
                    }); // 关闭当前tab回到列表
            });
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.manageName = data.formName;
            this.formKey = data.formKey;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.formKey,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        remoteMethodManage(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.manageList(data);
            }, 500);
        },
    },
};
</script>
<style>
</style>
